<template>
  <me-camera v-if="showCamera" @photo="photo" @show="showCamera = false"></me-camera>
  <view v-else>
    <view class="content">
      <view class="form-card">
        <u-form label-width="140">
          <u-form-item label="像素尺寸">
            <u-input v-model="size.label" type="select" @click="show = true" />
            <u-select v-model="show" :list="list" value-name="desc" label-name="title" @confirm="change"> </u-select>
          </u-form-item>
        </u-form>
      </view>
      <view style="font-size: 34rpx; font-weight: bold; margin: 10rpx">图片详情</view>
      <view class="mian">
        <view class="viewd">图片类型：</view>
        <view class="views">{{ size.label ? size.label : '请选择' }}</view>
        <view class="viewd">像素尺寸：</view>
        <view class="views">{{ size.value ? size.value + 'px' : '请选择' }}</view>
        <view class="viewd">文件大小：</view>
        <view class="views">无要求</view>
        <view class="viewd">文件格式：</view>
        <view class="views">jpg，png</view>
        <view class="viewd">其他要求：</view>
        <view class="views">人像整齐</view>
      </view>
      <view class="mian" style="color: #999999; margin-top: 20rpx">
        开发不易！看个广告就能白嫖啦，动动你那可爱的小手指点个广告吧！一天只要看一个小广告就可以无限使用我们的小程序了。
      </view>

      <view class="button">
        <u-button @click="button" type="primary" plain>上传照片</u-button>
      </view>
    </view>
    <me-cutter :maxSize="width" @ok="onok" @cancel="oncancle" :url="base64" :fixed="true" :width="width" :height="height"></me-cutter>
  </view>
</template>

<script>
import { pixel } from '../data.js';
import { parsePhoto, base64tofile } from '@/common/api/system.js';
let videoAd = null;
const d = new Date();
export default {
  data() {
    return {
      show: false,
      showCamera: false,
      width: 0,
      height: 0,
      base64: '',
      list: pixel,
      size: {},
    };
  },
  onLoad() {
    let numberAd = uni.getStorageSync('numberAd');
    if (numberAd == 'ons' || (numberAd != d.getDate() && wx.createRewardedVideoAd)) {
      videoAd = wx.createRewardedVideoAd({
        adUnitId: 'adunit-952765eecba4e4f2',
      });
      videoAd.onLoad(() => {});
      videoAd.onError((err) => {});
      videoAd.onClose((res) => {
        console.log(res);
        if (res.isEnded) {
          uni.setStorageSync('numberAd', d.getDate());
          this.showCamera = true;
        } else {
          this.$u.toast('请看完一次视频后再试');
        }
      });
    }
  },
  methods: {
    //调用裁剪
    cut(base64, width, height) {
      this.width = width;
      this.height = height;
      parsePhoto(base64).then((res) => {
        var data = 'data:image/png;base64,' + res.foreground;
        base64tofile(data).then((res) => {
          this.base64 = res;
        });
      });
    },
    //裁剪成功
    onok(e) {
      var base64 = e.path;
      uni.saveImageToPhotosAlbum({
        filePath: base64,
        success() {
          uni.showToast({
            title: '保存成功',
          });
        },
      });
    },
    //裁剪界面点击了返回
    oncancle() {
      this.base64 = '';
    },

    change(value) {
      this.size = value[0];
    },
    button() {
      if (!this.size.value)
        return uni.showToast({
          title: '请选择尺寸',
          icon: 'none',
        });
      let numberAd = uni.getStorageSync('numberAd');
      if (numberAd == 'ons' || (numberAd != d.getDate() && videoAd)) {
        uni.showModal({
          title: '提示',
          content: '每天要看一次视频才能开始制作证件照，点击确认后开始播放广告视频',
          success: (res) => {
            if (res.cancel) return;
            videoAd.show().catch(() => {
              // 失败重试
              videoAd
                .load()
                .then(() => videoAd.show())
                .catch((err) => {
                  console.log('激励视频广告显示失败');
                });
            });
          },
        });
      } else {
        this.showCamera = true;
      }
    },
    photo(url) {
      const size = this.size.value.split('*');
      const base64 = 'data:image/jpeg;base64,' + wx.getFileSystemManager().readFileSync(url, 'base64');
      this.cut(base64, size[0], size[1]);
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  .content {
    margin: 30rpx;
    width: 690rpx;

    .button {
      position: fixed;
      z-index: 1;
      bottom: 30rpx;
      width: 690rpx;
    }

    .preview {
      width: 690rpx;
      height: 300rpx;
      margin-bottom: 30rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #f6f7fb;
      border-radius: 16rpx;
    }

    .form-card {
      margin: 30rpx 0;
    }

    .mian {
      margin-bottom: 30rpx;
      display: flex;
      color: #333333;
      justify-content: space-between;
      flex-wrap: wrap;
      background-color: #f6f7fb;
      padding: 20rpx 40rpx;
      line-height: 56rpx;
      border-radius: 16rpx;

      .viewd {
        width: 300rpx;
        text-align: left;
      }

      .views {
        width: 300rpx;
        text-align: right;
      }
    }
  }
}
</style>
